<script setup>
import { ref } from "vue";
import TopNav from "../../components/TopNav.vue";
import { useRouter } from "vue-router";
import { useStore } from "../../store/useStore";
//顶部内容
const title = ref("添加朋友");
//微信号
const store = useStore()

//跳转至搜索账号页
const router = useRouter()

//数据
const data = ref([
  {
    id: 1,
    name: "雷达加朋友",
    icon: "wechat-moments",
  },
  {
    id: 2,
    name: "面对面建群",
    icon: "live",
  },
  {
    id: 3,
    name: "扫一扫",
    icon: "stop-circle",
  },
  {
    id: 4,
    name: "手机联系人",
    icon: "enlarge",
  },
  {
    id: 5,
    name: "公众号",
    icon: "audio",
  },
  {
    id: 6,
    name: "企业微信联系人",
    icon: "eye",
  },
]);
const JumpUser = () => {
  router.push('/searfriend')
};
const btn = (item) => {
  if (item.name === '雷达加朋友') {
    router.push('/addfriend')
  } else if (item.name == '扫一扫') {
    router.push('/scan')
  }
};
</script>

<template>
  <TopNav :title="title" style="width:95%;margin: 0 auto;"/>
  <div class="top">
    <van-field placeholder="账号/手机号" input-align="center" @click="JumpUser" />
    <div class="Topwin">我的微信号：{{ store.info.username }}</div>
    <div class="mainFriend">
      <ul>
        <li v-for="item in data" @click="btn(item)">
          <p style="display: flex; align-items: center">
            <span><van-icon :name="item.icon" /></span><span>{{ item.name }}</span>
          </p>
          <span>></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.Topwin {
  margin-top: 10px;
  text-align: center;
}

.van-cell {
  width: 95%;
  margin: 0 auto;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 15px;
  border-radius: 9px;
}

.mainFriend {
  width: 100%;
  height: 90%;
  margin-top: 30px;
  background-color: rgb(237, 237, 237);
}

.mainFriend ul {
  width: 100%;
  background-color: rgb(237, 237, 237);
  padding-top: 5px;
}

.mainFriend ul li {
  display: flex;
  justify-content: space-between;
  background-color: rgb(252, 252, 252);
  width: 100%;
  height: 50px;
  align-items: center;
  color: black;
  border-bottom: 1px solid #ccc;
}

ul li p {
  margin: 0 10px;
  display: flex;
  font-size: 15px;
  font-weight: bold;
}

ul li span {
  margin-right: 10px;
}
</style>
